<template>
    <div id="AIChat">
        <van-sticky>
            <van-nav-bar title="智能客服" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <div id="AiChatCon" ref="chatContainer">
            <ul id="messages">
                <li v-for="msg in messages" :key="msg.id" :class="msg.isUser ? 'mainer' : 'other'">
                    <div class="avatar">
                        <template v-if="msg.isUser">
                            <img src="../../../assets/images/userImage.webp" alt="">
                        </template>
                        <template v-else>
                            <img src="../../../assets/images/Ai.png" width="40px" alt="">
                        </template>
                    </div>
                    <div class="words">
                        <span>{{ msg.text }}</span>
                    </div>
                </li>
            </ul>
        </div>
        <form id="form" action="">
            <input id="input" autocomplete="off" v-model="userInput" />
            <button @click.prevent="sendMessage">Send</button>
        </form>
    </div>
</template>

<script setup lang="ts">
import chat from './component/chat'
import { ref, onMounted, watch } from 'vue'

const onClickLeft = () => {
    window.location.href = '/home'
}

const messages = ref([])
const userInput = ref('')
let chatContainer = null

onMounted(() => {
    // 添加机器人问候语到消息列表
    const robotGreeting = {
        id: Date.now(),
        isUser: false,
        text: '您好，我是智能小爱，有什么可以帮助到您的吗？'
    }
    messages.value.push(robotGreeting)

    const synth = window.speechSynthesis
    const utterance = new SpeechSynthesisUtterance('您好，我是智能小爱，有什么可以帮助到您的吗？')
    synth.speak(utterance)

    chatContainer = document.getElementById('AiChatCon')
    // 监听 messages 的变化
    watch(messages, () => {
        if (chatContainer) {
            chatContainer.scrollTop = chatContainer.scrollHeight
        }
    })
})

const sendMessage = async () => {
    if (userInput.value) {
        const userMessage = {
            id: Date.now(),
            isUser: true,
            text: userInput.value
        }
        messages.value.push(userMessage)
        try {
            const aiResponse = await chat(userInput.value)
            const aiMessage = {
                id: Date.now() + 1,
                isUser: false,
                text: aiResponse
            }
            messages.value.push(aiMessage)
            userInput.value = ''
        } catch (error) {
            console.error('获取 AI 响应时出现错误：', error)
        }
    }
}
</script>

<style scoped>
#AIChat {
    width: 100vw;
    height: 100vh;
}

#AiChatCon {
    width: 100vw;
    min-height: 85vh;
    background: #fcfafa;
    padding-top: 30px;
    padding-bottom: 50px;
    overflow-y: auto;
}

#form {
    background: rgb(238, 236, 236);
    padding: 0.25rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 3rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

img{
    width:40px;
    height:40px;
}

#input {
    border: none;
    padding: 0 1rem;
    flex-grow: 1;
    border-radius: 2rem;
    margin: 0.25rem;
}

#input:focus {
    outline: none;
}

#form>button {
    background: #27c669;
    border: none;
    padding: 0 1rem;
    margin: 0.25rem;
    border-radius: 3px;
    outline: none;
    color: #fff;
}

#messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#messages li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mainer {
    width: 100%;
    text-align: right;
    flex-direction: row-reverse;
}

.mainer.avatar {
    width: 50px;
    height: 50px;
}

.mainer.avatar img {
    width: 100%;
    height: 100%;
}

.mainer.words {
    max-width: 60%;
    height: auto;
    background: #95ec69;
    text-align: left;
    margin-right: 20px;
    border-radius: 10px;
    line-height: 1.5em;
    padding: 8px;
    white-space: normal;
    word-wrap: break-word;
}

.other {
    width: 100%;
    height: auto;
}

.other.avatar {
    width: 50px;
    height: 50px;
}

.other.avatar img {
    width: 100%;
    height: 100%;
}

.other.words {
    max-width: 60%;
    height: auto;
    background: #ffffff;
    text-align: left;
    margin-left: 20px;
    border-radius: 10px;
    line-height: 1.5em;
    padding: 8px;
    white-space: normal;
    word-wrap: break-word;
}
</style>